function addMap(graph, map){

}

var MapGraph = function (map) {
    var container = map._container;
    var canvas = document.createElement("div");
    // canvas.style.width = "100%";
    // canvas.style.height = "100%";
    canvas.style.position = "absolute";
    canvas.style.left = "0px";
    canvas.style.top = "0px";
    canvas.style.right = "0px";
    canvas.style.bottom = "0px";
    canvas.style.overflow = 'hidden';
    canvas.style.zIndex = 1001;

    container.appendChild(canvas);

    Q.doSuperConstructor(this, MapGraph, [canvas]);
    this.enableWheelZoom = false;
    this.enableDoubleClickToOverview = false;
    this.originAtCenter = false;
    this.setMap(map);
    this.visibleFilter = function(d){
        if (d instanceof Q.Node && d.zoom && map._zoom < d.zoom) {
            return false;
        }
        return true;
    }
}

MapGraph.prototype = {
    map: null,
    mapShowing: true,
    enableInertia: false,
    createNodeByLonLat: function (name, lon, lat) {
        var l = this.toLonLat(lon, lat);
        var p = this.getPixelFromLonLat(l);
        var node = graph.createNode(name, p.x, p.y);
        node.lonLat = l;
        return node;
    },
    toLonLat: function (lon, lat) {
        return new L.latLng(lat, lon);
    },
    getPixelFromLonLat: function (lonLat) {
        return this.map.latLngToContainerPoint(lonLat, this.map._zoom);
    },
    getLonLatFromPixel: function (x, y) {
        return this.map.containerPointToLatLng([x, y]);
    },
    setMap: function (map) {
        this.map = map;
//        map._zoomAnimated = false;

        this.map.on("zoomstart", this.hideGraph, this);
        this.map.on("zoomend", this.invalidateMap, this);
        this.map.on("movestart", this.hideGraph, this);
        this.map.on("move", this.hideGraph, this);
        this.map.on("moveend", this.invalidateMap, this);

        this.html.ondblclick = function (evt) {
            if (this.getElementByMouseEvent(evt)) {
                Q.stopEvent(evt);
            }
        }.bind(this);
//        this.onmousewheel = function(evt){
//            if (this._scaling) {
//                return;
//            }
//            this._scaling = true;
//            Q.callLater(function() {
//                delete this._scaling;
//            }, this, 200);
//            this.map.setZoomAround(this.globalToLocal(evt), this.map._zoom + (evt.delta > 0 ? 1 : -1));
//        }
        this.interactionDispatcher.addListener(function (evt) {
            if (evt.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
                var datas = evt.datas;
                Q.forEach(datas, function (data) {
                    var pixel = this.toCanvas(data.location.x, data.location.y);
                    data.lonLat = this.getLonLatFromPixel(pixel.x, pixel.y);
                }, this);
            }
        }, this)
    },
    hideGraph: function(){
        this.html.style.visibility = "hidden";
    },
    showGraph: function(){
        this.html.style.visibility = "";
    },
    translate: function (tx, ty) {
        Q.doSuper(this, MapGraph, "translate", arguments);
        this.map.panBy([-tx, -ty], {animate: false});
    },
    resetVisibility: function () {
        this.forEach(function (e) {
            if (e.invalidateVisibility) {
                e.invalidateVisibility(true);
            }
        });
    },
    invalidateMap: function(){
        if(this._timer){
            clearTimeout(this._timer);
        }
        this._timer = setTimeout(this.updateNodes.bind(this), 100);
    },
    updateNodes: function () {
        delete this._timer;
        this._invalidateMapFlag = false;
        this.translateTo(0, 0, 1, false);
        this.resetVisibility();
        this.forEach(function (d) {
            if (d instanceof Q.Node && d.lonLat) {
                var l = d.lonLat;
                var p = this.getPixelFromLonLat(l);
                d.location = p;
            }
        }, this);
        this.showGraph();
    }
}
Q.extend(MapGraph, Q.Graph);